
{{template "header" .}}
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">

            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>

            <li class="nav-item d-none d-sm-inline-block">
                <a href="/dashboard" class="nav-link">Home</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Class</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        {{template "right_nav" .}}
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    {{template "left_menu" .}}

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">&nbsp;</h1>
                    </div><!-- /.col -->

                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">Add Class</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form class="form-horizontal">
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label for="class_name" class="col-sm-2 col-form-label">Class Name</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="class_name" placeholder="Class Name">
                                        </div>
                                    </div>



                                    <div class="form-group row">
                                        <label for="reservation" class="col-sm-2 col-form-label">Date range</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control float-right" id="reservation">
                                        </div>
                                    </div>




                                    <div class="form-group row">
                                        <label for="teacher" class="col-sm-2 col-form-label">Teacher</label>
                                        <div class="col-sm-10">
                                            <select class="select2" id="teacher" multiple="multiple" data-placeholder="Select Teacher" style="width: 100%;">
                                                {{range $i, $v := .teacher_list}}
                                                <option value="{{$i}}">{{$v}}</option>
                                                {{end}}

                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label for="student_number" class="col-sm-2 col-form-label">Student Number</label>
                                        <div class="col-sm-10">
                                            <input type="number" class="form-control" id="student_number" placeholder="Student Number">
                                        </div>
                                    </div>


                                    <div class="form-group row" style="padding-top: 5px" >
                                        <label  class="col-sm-2 col-form-label">&nbsp;</label>
                                        <div class="col-sm-10">
                                            <button type="button" class="btn btn-info" id="submit">Submit</button>
                                            <span class="err" style="color: red;padding: 2px 8px;line-height: 16px;"></span>
                                        </div>
                                    </div>


                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer">
                                    &nbsp;
                                </div>
                                <!-- /.card-footer -->
                            </form>
                        </div>


                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->




    {{template "copyright" .}}



</div>
<!-- ./wrapper -->


</body>


{{template "footer" .}}


<!-- Select2 -->
<script src="/source/plugins/select2/js/select2.full.min.js"></script>

<!-- InputMask -->
<script src="/source/plugins/moment/moment.min.js"></script>
<script src="/source/plugins/inputmask/jquery.inputmask.min.js"></script>
<!-- date-range-picker -->
<script src="/source/plugins/daterangepicker/daterangepicker.js"></script>




<script>
    $(function () {

        $('.select2').select2()
        //Date range picker
        $('#reservation').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            }
        })
        //Date range picker with time picker

    })


    function insert(){
        $('.err').html('');
        var class_name = $.trim($('#class_name').val());
        var reservation = $.trim($('#reservation').val());
        var teacher = $.trim($('#teacher').val());
        var student_number = parseInt($.trim($('#student_number').val()));


        if(!class_name || !reservation || !teacher || !student_number){
            $('.err').html("参数错误")
            return;
        }

        var aTmp = reservation.split(' - ');
        var start_date = $.trim(aTmp[0]);
        var end_date = $.trim(aTmp[1]);
        start_date = moment(start_date).unix();
        end_date = moment(end_date).unix();




        $.ajax({

            url:'/class/insert',
            type:'post',
            beforeSend:function () {},
            contentType:"application/json;charset=utf-8",
            data:JSON.stringify({
                class_name:class_name,
                start_date:start_date,
                end_date:end_date,
                teacher:teacher,
                student_number:student_number
            }),


            dataType:"json",
            success:function(rs){

                if(rs.sta == 1){
                    window.location.href="/class/list";
                }else{

                    $('.err').html(rs.msg);
                }

            },
            error:function(){
                $('.err').html("system error");
            }

        })
    }


    $('#submit').click(function () {
        insert();
    })




</script>


<script type="text/javascript">
    $('.mt-2').find('.active').removeClass('active');

    $('.mt-2 #class-nav').addClass('active');
    $('#class-nav').parent().addClass("menu-is-opening menu-open");

    $('a[href="/class/add"]').addClass('active');

</script>